<template>
	<!-- 我的预约 -->
	<view class="content">
		<!-- <view class="tabs_box">
			<u-tabs
				:list="tabsList"
				:scrollable="false"
				:activeStyle="{
					color: '#00ABA9',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				@click="tabsEvent"
			/>
		</view> -->
		
		<view class="content_module">
			<view class="data_item" v-for="(item,index) in dataList" :key="index">
				<view class="module1">
					<view class="left">
						<!-- <view class="yyzt" :class="
							item.yyzt === '1' ? 'yyzt1' :
							item.yyzt === '2' ? 'yyzt2' : 
							item.yyzt === '3' ? 'yyzt3' : 
							item.yyzt === '4' ? 'yyzt4' : ''
						">
							{{
								item.yyzt === '1' ? '待确认' : 
								item.yyzt === '2' ? '已确认' : 
								item.yyzt === '3' ? '已完成' : 
								item.yyzt === '4' ? '已取消' : ''
							}}
						</view> -->
						<view class="yymc">{{item.placeName}}</view>
					</view>
					<!-- <view class="right">￥{{item.daylyPrice}}</view> -->
				</view>
				<view class="module2" v-if="item.useType==1">预约时间：{{item.reserveDay+' '+item.beganTime+'-'+item.reserveDay+' '+item.beganTime}}</view>
				<view class="module2" v-if="item.useType==0">预约时间：{{item.reserveDay}}</view>
				<view class="module3">场地地址：{{item.location}}</view>
				<view class="module4">场地电话：{{item.telephone}}</view>
			<!-- 	<view class="module5">
					<view class="cdzt">
						{{
							item.yyzt === '1' ? '等待场地方确认' :
							item.yyzt === '2' ? '场地方已确认' : 
							item.yyzt === '3' ? '' : 
							item.yyzt === '4' ? '您已取消该预约' : ''
						}}
					</view>
					<view class="caozuo">
						<view class="button loukong" v-if="item.yyzt === '1'">取消预约</view>
						<view class="button shiti" v-if="item.yyzt === '2'">查看详情</view>
						<view class="button loukong" v-if="item.yyzt === '2'">联系场地</view>
						<view class="button shiti" v-if="item.yyzt === '3'">再次预约</view>
						<view class="button shiti" v-if="item.yyzt === '4'">重新预约</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myReserveList
	} from '@/api/home.js'
	export default {
		data() {
			return {
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					userId: JSON.parse(uni.getStorageSync("userInfo")).userId,
				
				},
				total:0,
				tabsList: [
					{
						name: "全部"
					},
					{
						name: "待确认"
					},
					{
						name: "已确认"
					},
					{
						name: "已完成"
					},
					{
						name: "已取消"
					}
				],
				dataList: [
					{
						yyzt: "1", //1待确认 2已确认 3已完成 4已取消
						name: "场地名称场地名称场地名称",
						qian: "2400",
						yysj: "2025-09-15 09:00-12:00",
						yyrs: "50",
						ddh: "20250915090001"
					},
					{
						yyzt: "2", //1待确认 2已确认 3已完成 4已取消
						name: "场地名称场地名称场地名称",
						qian: "2400",
						yysj: "2025-09-15 09:00-12:00",
						yyrs: "50",
						ddh: "20250915090001"
					},
					{
						yyzt: "3", //1待确认 2已确认 3已完成 4已取消
						name: "场地名称场地名称场地名称",
						qian: "2400",
						yysj: "2025-09-15 09:00-12:00",
						yyrs: "50",
						ddh: "20250915090001"
					},
					{
						yyzt: "4", //1待确认 2已确认 3已完成 4已取消
						name: "场地名称场地名称场地名称",
						qian: "2400",
						yysj: "2025-09-15 09:00-12:00",
						yyrs: "50",
						ddh: "20250915090001"
					}
				]
			}
		},
		onLoad() {
			this.getList()
		},
		mounted() {
			
		},
		onPullDownRefresh() {
			// 下拉刷新时重置数据
			this.queryParams.pageNum = 1;
			this.dataList = []
			this.getList()
		
		},
		onReachBottom() {
		
			if (this.queryParams.pageNum * this.queryParams.pageSize < this.total) {
				this.queryParams.pageNum++
				this.getList()
			}
		},
		
		methods: {
			tabsEvent(item) {
				console.log('item', item);
			},
			getList(){
				myReserveList(this.queryParams).then(res=>{
					console.log(res)
					let parsed=res.rows
					if (this.queryParams.pageNum === 1) {
						this.dataList = parsed
					} else {
						this.dataList = this.dataList.concat(parsed)
					}
					this.total = res.total
					uni.stopPullDownRefresh(); // 停止下拉刷新动画
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		
	}
	.tabs_box {
		background-color: #FFFFFF;
	}
	::v-deep .u-tabs__wrapper__nav__line {
		background: #28AAA9 !important;
	}
	.content_module {
		background-color: #F4F4F4;
		padding: 30rpx;
		>.data_item {
			background-color: #FFFFFF;
			border-radius: 15rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			>.module1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				>.left {
					display: flex;
					align-items: center;
					>.yyzt {
						font-size: 25rpx;
						padding: 10rpx 20rpx;
						border-radius: 20rpx;
						margin-right: 20rpx;
					}
					>.yyzt1 {
						color: #FF9901;
						background-color: #FFF7E6;
					}
					>.yyzt2 {
						color: #00ABA9;
						background-color: #DCFCE7;
					}
					>.yyzt3 {
						color: #1E40AF;
						background-color: #DBEAFE;
					}
					>.yyzt4 {
						color: #1F2937;
						background-color: #F3F4F6;
					}
					>.yymc {
						font-size: 32rpx;
						font-weight: bold;
						// background-color: pink;
						width: 350rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				>.right {
					font-size: 32rpx;
					color: #FF5B02;
				}
			}
			>.module2 {
				color: #6B7280;
				padding: 20rpx 0;
				// font-size: ;
			}
			>.module3 {
				color: #6B7280;
			}
			>.module4 {
				color: #6B7280;
				padding: 20rpx 0;
			}
			>.module5 {
				border-top: 1px solid #E5E7EB;
				padding-top: 15rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				>.cdzt {
					color: #6B7280;
				}
				>.caozuo {
					display: flex;
					>.loukong {
						margin-left: 15rpx;
						padding: 20rpx 40rpx;
						border-radius: 10rpx;
						color: #00ABA9;
						background-color: #FFFFFF;
						border: 1px solid #00ABA9;
					}
					>.shiti {
						margin-left: 15rpx;
						padding: 20rpx 40rpx;
						border-radius: 10rpx;
						color: #FFFFFF;
						background-color: #00ABA9;
					}
				}
			}
		}
	}
</style>